<template>
  <div class="panel">
    <brokenLine :lineType="lineType"></brokenLine>
    <el-row :gutter="20">
      <el-col :span="24" class="relative">
        <el-form
          class="head mt10 pt10"
          ref="completionRateForm"
          :model="completionRateForm"
          label-width="40px"
          style="width: 92%;"
          v-if="showCenterCRF"
        >
          <el-row type="flex" justify="end" class="filter-box">
            <el-col :span="5" class="pl10">
              <el-form-item label="时间">
                <div class="block time-filter">
                  <el-date-picker
                    v-model="completionRateForm.time"
                    type="daterange"
                    align="left"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions2"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    @change="handleCompletionRate"
                  ></el-date-picker>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="3" class="pl10">
              <el-form-item label="类型">
                <el-select
                  v-model="completionRateForm.type"
                  placeholder="筛选类型"
                  @change="handleCompletionRate"
                >
                  <el-option label="上门计划" value="visitComplete"></el-option>
                  <el-option label="签单计划" value="signComplete"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="filter-btn pointer" @click="handleSwitchCenterCRF">
          <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
          <span style="color: #409EFF;" class="fs16">过滤</span>
        </div>
        <div class="grid-content-center bg-purple pt20 pl15" id="completion-rate"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form
          v-if="showDeptCRF"
          class="head pt20"
          ref="completionRateForm"
          :model="completionRateForm"
          label-width="50px"
          style="width: 92%;"
        >
          <el-row type="flex" justify="end" class="filter-box">
            <el-col :span="5">
              <el-form-item label="时间">
                <div class="block time-filter">
                  <el-date-picker
                    v-model="completionRateForm1.time"
                    type="daterange"
                    align="left"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions2"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    @change="handleCompletionRate1"
                  ></el-date-picker>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="类型">
                <el-select
                  v-model="completionRateForm1.type"
                  placeholder="筛选类型"
                  @change="handleCompletionRate1"
                >
                  <el-option label="上门计划" value="visitComplete"></el-option>
                  <el-option label="签单计划" value="signComplete"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="relative">
              <el-button v-if="!completionRateFilter" @click="handleShowCR">业务筛选...</el-button>
              <el-card class="box-card" v-else>
                <div slot="header">
                  <span>部门筛选</span>
                  <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="handleShowCR"
                  >收起</el-button>
                </div>
                <div>
                  <el-form-item v-for="(item1, index) in deptList1" :key="index">
                    <el-checkbox-group
                      v-model="completionRateForm1.depts"
                      @change="handleCompletionRate1"
                    >
                      <el-checkbox
                        v-for="(item, index) in item1"
                        :key="index"
                        :label="item.name"
                        name="type"
                      ></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-form>
        <div class="filter-btn pointer" @click="handleSwitchDeptCRF">
          <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
          <span style="color: #409EFF;" class="fs16">过滤</span>
        </div>

        <div class="grid-content-center bg-purple pt20 pl15" id="completion-rate1"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="14" class="relative" style="overflow-y: scroll; height: 500px;">
        <el-form
          style="padding-left: 30%;"
          v-if="showSalesmanSRF"
          class="head pt20"
          ref="salesmanRankForm"
          :model="salesmanRankForm"
          label-width="40px"
        >
          <el-row type="flex" justify="end" class="filter-box">
            <el-col :span="14">
              <el-form-item label="时间">
                <div class="block time-filter">
                  <el-date-picker
                    v-model="salesmanRankForm.time"
                    type="daterange"
                    align="left"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions2"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    @change="handleSalesmanRank"
                  ></el-date-picker>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="类型">
                <el-select
                  v-model="salesmanRankForm.type"
                  placeholder="筛选类型"
                  @change="handleSalesmanRank"
                >
                  <el-option label="上门" value="visit"></el-option>
                  <el-option label="签单" value="sign"></el-option>
                  <el-option label="提车" value="pickCar"></el-option>
                  <el-option label="收费" value="charge"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="filter-btn pointer" @click="handleSwitchSalesmanSRF">
          <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
          <span style="color: #409EFF;" class="fs16">过滤</span>
        </div>
        <div
          class="grid-content-center bg-purple pt20 pl15"
          id="salesman-rank"
          style="height:2000px"
        ></div>
      </el-col>
      <funnel :centerList="centerList" :funnelTitle="funnelTitle" :funnelItem="funnelItem"></funnel>
    </el-row>
    <bar :centerList="centerList" :deptList1="deptList1" :depts1="depts1" ref="bar"></bar>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form
          v-if="showNegotiatorF"
          class="head pt20"
          ref="negotiatorForm"
          :model="negotiatorForm"
          label-width="50px"
          style="width: 92%;"
        >
          <el-row type="flex" justify="end" class="filter-box">
            <el-col :span="5">
              <el-form-item label="时间">
                <div class="block time-filter">
                  <el-date-picker
                    v-model="negotiatorForm.time"
                    type="daterange"
                    align="left"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions2"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    @change="handleNegotiator"
                  ></el-date-picker>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="filter-btn pointer" @click="handleSwitchNegotiatorF">
          <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
          <span style="color: #409EFF;" class="fs16">过滤</span>
        </div>
        <div class="grid-content-center bg-purple pt20 pl15" id="negotiator"></div>
      </el-col>
    </el-row>
    <pie :pieType="pieType"></pie>
  </div>
</template>

<script>
import {
  option11,
  option14,
  option15,
  option35,
  pickerOptions2
} from "@/../config/Stats_options";
import {
  getMonthStartDate,
  getMonthEndDate,
  getLastDay
} from "@/utils/getCurrMonth";
import pie from "@/components/pie";
import bar from "@/components/bar";
import funnel from "@/components/funnel";
import brokenLine from "@/components/brokenLine";

export default {
  name: "statistics",
  data() {
    return {
      salesmanRankForm: {
        time: [getMonthStartDate(), getMonthEndDate()],
        type: "visit"
      },
      completionRateForm: {
        time: [getMonthStartDate(), getMonthEndDate()],
        type: "visitComplete"
      },
      negotiatorForm: {
        time: [getMonthStartDate(), getMonthEndDate()]
      },
      pieType: ["distribution", "reason-notsign"],
      lineType: ["pass", "visit", "sign", "pickCarA", "charge"],
      completionRateForm1: {
        time: [getMonthStartDate(), getMonthEndDate()],
        type: "visitComplete",
        depts: []
      },
      centerDeptFilter: false,
      completionRateFilter: false,
      promotionList: [],
      centerList: [],
      deptList: [],
      deptList1: [],
      showCenterCRF: false,
      showDeptCRF: false,
      showSalesmanSRF: false,
      showNegotiatorF: false,
      funnelItem: [
        { value: 0, name: "上门数量" },
        { value: 0, name: "签单数量" },
        { value: 0, name: "进件数量" },
        { value: 0, name: "提车数量" }
      ],
      funnelTitle: "中心转化",
      depts1: [],
      pickerOptions2
    };
  },
  mounted() {
    this.getCenterList();
    this.handleSalesmanRank();
    this.handleNegotiator();
  },
  methods: {
    handleSwitchCenterCRF() {
      this.showCenterCRF = !this.showCenterCRF;
    },
    handleSwitchDeptCRF() {
      this.showDeptCRF = !this.showDeptCRF;
    },
    handleSwitchNegotiatorF() {
      this.showNegotiatorF = !this.showNegotiatorF;
    },
    handleSwitchSalesmanSRF() {
      this.showSalesmanSRF = !this.showSalesmanSRF;
    },
    handleCompletionRate() {
      option14.series = [];
      this.centerList.forEach((item, i) => {
        if (i > 4) {
          option14.series.push({
            radius: "38%",
            name: item,
            type: "gauge",
            center: [`${300 * (i + 1) - 1530}`, "74%"],
            detail: {
              formatter: "{value}%",
              offsetCenter: [0, "65%"],
              fontSize: 20
            },
            data: []
          });
        } else {
          option14.series.push({
            radius: "38%",
            name: item,
            type: "gauge",
            center: [`${300 * (i + 1) - 30}`, "30%"],
            detail: {
              formatter: "{value}%",
              offsetCenter: [0, "65%"],
              fontSize: 20
            },
            data: []
          });
        }
        this.$axios
          .post("/api/statistics/Stats_completionRate", {
            from: this.completionRateForm.time[0],
            to: this.completionRateForm.time[1],
            type: this.completionRateForm.type,
            center: item
          })
          .then(data => {
            option14.series[i].data.push(data);
          })
          .then(() => {
            this.updateCompletionRate();
          });
      });
    },
    handleCompletionRate1() {
      option15.series[0].data = [];
      option15.series[1].data = [];
      option15.series[2].data = [];
      option15.xAxis[0].data = [];
      this.$axios
        .post("/api/statistics/Stats_completionRate1", {
          from: this.completionRateForm1.time[0],
          to: this.completionRateForm1.time[1],
          type: this.completionRateForm1.type,
          depts: this.completionRateForm1.depts.length
            ? this.completionRateForm1.depts
            : this.depts1
        })
        .then(data => {
          option15.series[0].data = data.resoult1;
          option15.series[1].data = data.resoult2;
          option15.series[2].data = data.resoult3;
          option15.xAxis[0].data = data.xAxis;
        })
        .then(() => {
          this.updateCompletionRate1();
        });
    },
    handleNegotiator() {
      option35.series[0].data = [];
      option35.series[1].data = [];
      option35.series[2].data = [];
      option35.xAxis[0].data = [];
      this.$axios
        .post("/api/statistics/Stats_negotiator", {
          from: this.negotiatorForm.time[0],
          to: this.negotiatorForm.time[1]
        })
        .then(data => {
          option35.series[0].data = data.resoult3;
          option35.series[1].data = data.resoult2;
          option35.series[2].data = data.resoult1;
          option35.xAxis[0].data = data.xAxis;
        })
        .then(() => {
          this.updateNegotiator();
        });
    },
    handleSalesmanRank() {
      option11.yAxis.data = [];
      option11.series[0].data = [];
      this.$axios
        .post("/api/statistics/Stats_salesmanRank", {
          from: this.salesmanRankForm.time[0],
          to: this.salesmanRankForm.time[1],
          type: this.salesmanRankForm.type
        })
        .then(data => {
          option11.yAxis.data = data.salesmanName;
          option11.series[0].data = data.amount;
          option11.series[0].name = data.name;
        })
        .then(() => {
          this.updateSalesmanRank();
        });
    },
    handleShowCD() {
      this.centerDeptFilter = !this.centerDeptFilter;
    },
    handleShowCR() {
      this.completionRateFilter = !this.completionRateFilter;
    },
    getCenterList() {
      this.$axios
        .get("/api/system/centers")
        .then(data => {
          this.centerList = data.map(item => {
            return item.name;
          });
        })
        .then(() => {
          this.getDeptList1();
          this.handleCompletionRate();
        });
    },
    getDeptList1() {
      this.deptList1 = [];
      const promises = [];
      this.centerList.forEach(item => {
        const promise = new Promise(resolve => {
          resolve(
            this.$axios
              .post("/api/system/departmentList", { center: item })
              .then(data => {
                data.forEach(element => {
                  element.name = item + "[" + element.name + "]";
                  this.depts1.push(element.name);
                  this.completionRateForm1.depts.push(element.name);
                });
                this.deptList1.push(data);
              })
          );
        });
        promises.push(promise);
      });
      Promise.all(promises).then(() => {
        this.$refs.bar.handleCenterDept();
        this.handleCompletionRate1();
      });
    },
    updateSalesmanRank() {
      let salesmanRank = this.$echarts.init(
        document.getElementById("salesman-rank")
      );
      salesmanRank.setOption(option11, true);
    },
    updateCompletionRate() {
      let completionRate = this.$echarts.init(
        document.getElementById("completion-rate")
      );
      completionRate.setOption(option14, true);
    },
    updateCompletionRate1() {
      let completionRate1 = this.$echarts.init(
        document.getElementById("completion-rate1")
      );
      completionRate1.setOption(option15, true);
    },
    updateNegotiator() {
      let negotiator = this.$echarts.init(
        document.getElementById("negotiator")
      );
      negotiator.setOption(option35, true);
    }
  },
  components: {
    pie,
    bar,
    brokenLine,
    funnel
  }
};
</script>
<style>
</style>